<template>
	<view class="time1">
		<view class="top flex justify-between align-center">
			<text @tap="cancel">取消</text>
			<text @tap="confirm">确定</text>
		</view>
	
		<picker-view class="picker"   :value="values" @change="getime" indicator-style="height:30px;">
			<picker-view-column>
				<view class="hours" style="line-height:30px; text-align: center;" v-for="(item,index) in hoursList"
					:key="index">{{item}}</view>
			</picker-view-column>
			<picker-view-column>
				<view class="minutes" style="line-height:30px; text-align: center;" v-for="(item,index) in minutes"
					:key="index">{{item}}</view>
			</picker-view-column>
			<picker-view-column>
				<view style="line-height:30px; text-align: center;">-</view>
			</picker-view-column>
			<picker-view-column>
				<view class="hours" style="line-height:30px; text-align: center;" v-for="(item,index) in hoursList"
					:key="index">{{item}}</view>
			</picker-view-column>
			<picker-view-column>
				<view class="minutes" style="line-height:30px; text-align: center;" v-for="(item,index) in minutes"
					:key="index">{{item}}</view>
			</picker-view-column>
		</picker-view>
	</view>
</template>
<script>
	let minutes = []
	for (let i = 0; i <= 59; i++) {
		if (i < 10) {
			i = "0" + i
		}
		minutes.push(i)
	}
	export default {
		props: {
			time: {
				type: Array,
				default () {
					return ['15', '0', '0', '18', '0'];
				}
			},
			rangeTime: {
				type: Array,
				default () {
					return ['07', '0', '0', '19', '0']
				}
			},
		
			
		},
		watch: {
			time: function() {
				console.log(222)
				this.values = this.time
			}
		},
		mounted() {

			this.values = [parseInt(this.time[0]), parseInt(this.time[1]), parseInt(this.time[2]), parseInt(this.time[3]),
				parseInt(this.time[4])
			];

		},
		data() {
			return {
				values: [], //默认结束开始时间
				hoursList: ['00', '01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12', '13', '14', '15',
					'16', '17', '18', '19', '20', '21', '22', '23'
				],
				minutes,
			}
		},
		methods: {
			confirm() {
                console.log(this.values);
				let time = parseInt(this.values[0]) + ":" + (parseInt(this.values[1]) > 9 ? parseInt(this.values[1]) : (
					'0' + this.values[1])) + "-" + parseInt(this.values[3]) + ":" + (parseInt(this.values[4]) > 9 ?
					parseInt(this.values[4]) : ('0' + this.values[4]))
				if (this.values[0] > this.values[3]) {
					uni.showToast({
						icon: 'none',
						title: '开始时间不能大于结束时间',
						duration: 2000
					});
					return;
				} else if (this.values[0] == this.values[3]) {
						if (this.values[1] > this.values[4]) {
							uni.showToast({
								icon:'none',
								title: '开始时间不能大于结束时间',
								duration: 2000
							});
							return;
						}
					
				}else{
					this.$emit("confrim", {
						time: time,
						timeArr: this.values
					})
				}

				
			},
			
			cancel() {
				let time = this.values[0] + ":" + parseInt(this.values[1])>9?this.values[1]:('0'+parseInt(this.values[1])) + "-" + this.values[3] + ":" + parseInt(this.values[4])>9?this.values[1]:('0'+parseInt(this.values[4])) 
				this.$emit("cancel", {
					time: time
				})
			},
			getime(e) {

			 // this.values=e.detail.value;
			 console.log(this.values);
			
			let val = e.detail.value;
			// console.log(parseInt(this.minutes[parseInt(val[4])]));
			// console.log( parseInt(this.rangeTime[4]));
			let con1=(parseInt(this.hoursList[parseInt(val[0])]) < parseInt(this.rangeTime[0])); // 判断开始时间 当前时间小于设定开始时间
			let con5=(parseInt(this.hoursList[parseInt(val[0])]) > parseInt(this.rangeTime[3])); // 判断开始时间  时
			let con2=( parseInt(this.hoursList[parseInt(val[3])])> parseInt(this.rangeTime[3])); //判断结束时间  当前时间（结束时间 时） 小于设定结束时间
			let con6=(parseInt(this.hoursList[parseInt(val[3])]) <  parseInt(this.rangeTime[0])); // 判断开始时间  时
			let con3=((parseInt(this.hoursList[parseInt(val[0])]) == parseInt(this.rangeTime[0])) && (parseInt(this.minutes[parseInt(val[1])]) < parseInt(this.rangeTime[1]))) ;
			let con4=((parseInt(this.hoursList[parseInt(val[3])]) == parseInt(this.rangeTime[3])) && (parseInt(this.minutes[parseInt(val[4])]) > parseInt(this.rangeTime[4])));
			let con7=((parseInt(this.hoursList[parseInt(val[0])]) == parseInt(this.rangeTime[3])) && (parseInt(this.minutes[parseInt(val[1])]) > parseInt(this.rangeTime[4])));
			
				if(con1 || con2 || con3 || con4 || con5  || con6 || con7)
				{
				  if(con1 || con5)
				  {
					  this.$set(this.values,0,this.values[0])
				  }
				  if(con2 || con6)
				  {
				  		this.$set(this.values,3,this.values[3])
				  }
				  if(con3)
				  {
				  					  this.$set(this.values,1,this.values[1])
				  }
				  if(con4)
				  {
				  					  this.$set(this.values,4,this.values[4])
				  }
				  if(con7)
				  {
					
				  					  this.$set(this.values,1,0);
									
				  }
				  this.$u.toast('营业时间为:'+this.rangeTime[0]+":"+(parseInt(this.rangeTime[1])>9?parseInt(this.rangeTime[1]):('0'+parseInt(this.rangeTime[1])))+'-'+this.rangeTime[3]+":"+(parseInt(this.rangeTime[4])>9?parseInt(this.rangeTime[4]):('0'+parseInt(this.rangeTime[4]))));
					
				}else{

					this.$set(this.values,0,parseInt(this.hoursList[parseInt(val[0])]))
					
					this.$set(this.values,1,parseInt(this.minutes[parseInt(val[1])]))
					
					this.$set(this.values,2,parseInt(val[2]))
					
					this.$set(this.values,3,parseInt(this.hoursList[parseInt(val[3])]))
					
					this.$set(this.values,4,parseInt(this.minutes[parseInt(val[4])]))
				}
              
			},
		}
	}
</script>
<style lang="scss">
	.time1 {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		width: 100%;
		margin: 0 auto;
		background-color: #FFFFFF;
		color: #000;
		height: 450rpx;
		z-index: 666666;
		border-top: 1rpx solid #eeeeee;

		.top {
			width: 690rpx;
			margin: 0 auto;
			height: 100rpx;
			line-height: 100rpx;

			text {
				font-weight: bold;

				&:nth-child(1) {
					font-size: 28rpx;
					color: #999;
				}

				&:nth-child(2) {
					font-size: 28rpx;
					color: #0A84FF;
				}
			}
		}

		.tip12 {
			width: 100%;
			height: 100rpx;

			view {
				width: 50%;
				text-align: center;
				line-height: 100rpx;
				font-size: 40rpx;
				color: #000000;
			}
		}

		.hours {
			font-size: 30rpx;
			font-weight: bold;
			color: #000;
		}

		.minutes {
			font-size: 30rpx;
			font-weight: bold;
			color: #000;
		}
	}

	.picker {
		width: 100%;
		height: 300rpx;
	}
</style>
